<template>
  <div class="address">
      <header>
        <van-nav-bar
          title="收货地址"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
          @click-right="onClickRight"
        />
      </header>
      <main>
        <van-address-list
        v-model="chosenAddressId"
        :list="list"
        default-tag-text="默认"
        @add="onAdd"
        @edit="onEdit"
      />
      </main>
  </div>
</template>

<script>
import { getAddress } from '@/api/api/index'
export default {
 data() {
    return {
      chosenAddressId: '1',
      list: [],
    };
  },
  created() {
    getAddress().then(res => {
      if (res.code === 200) {
        res.data.forEach(item => {
          item.address = item.province + item.city + item.address
          item.id = item._id;
        })
        this.list = res.data
      }
    })
  },
  methods: {
    onAdd() {
      //跳转到 编辑页面
      this.$router.push("/home/mine/addressEdit")
    },
    onEdit(item, index) {
      Toast('编辑地址:' + index);
    },
    //跳转 个人页面
    onClickLeft() {
      this.$router.push("/home/mine")
    },
    onClickRight() {
      Toast('按钮');
    },
  },
}
</script>

<style lang="scss">
.address{
  width: 100%;
  height: 100%;
}
.address header{
  text-align: center;
  background: white;
  font-size: 20px;
}
.address .van-ellipsis{
  font-size: 20px;
  font-weight: bolder;
}
.address{
  background-color: #f5f5f5;
}
#app footer{
  height: 50px!important;
}
</style>